// 报表预定义
import React, { useCallback, useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { CarryOutOutlined } from '@ant-design/icons';
import { getCategoryTree } from 'src/services/AnalyseManage';
import { Tree } from 'antd';
import { AnalyseCategorySelectProp } from 'src/services/AnalyseManage/type';
import styles from './index.module.scss';
import _ from 'lodash';

const AnalyseCategorySelect = ( props: AnalyseCategorySelectProp ) => {
	const { onSelect, type, deloitteFlag, menu } = props;
	const [ treeData, setTreeData ] = useState( [] );
	const [ selectNode, setSelectNode ] = useState( );
	const [ selectedKeys, setSelectedKeys ] = useState( [] );

	const buildChild = useCallback( ( item: any ) => {
		let childs = [];
		item.childrenType === 'CATEGORY' && item.children.forEach( ( childrenItem: any ) => {
			if( childrenItem.childrenType === 'CATEGORY' ) {
				let child = buildChild( childrenItem );
				childs.push( child );
			}
		} );
		return {
			...item,
			title: item.name,
			key: item.id,
			children: childs,
			// selectable: item.parentId === '0' ? false : true,
			selectable: true,
			icon: <CarryOutOutlined/>
		};
	}, [] );

	const loadDatas = useCallback( async () => {
		// 德勤方案
		if ( deloitteFlag === '1' ) {
			let data = [];
			let menuItem = _.find( menu, { name: '德勤方案' } );
			if ( menuItem && menuItem.childrenList ) {
				data = menuItem.childrenList.map( item => {
					let isActive = selectNode ? selectNode.id ===item.resourceId : false;
					return {
						...item,
						id: item.resourceId,
						key: item.resourceId,
						title: item.name,
						children: [],
						selectable: true,
						// <CarryOutOutlined/>
						icon: <span className={ `iconfont ${ isActive ? 'bdhwenjianjiadakai' : 'bdhwenjianjiaguanbi' }` }></span>
					};
				} );
			}
			setTreeData( data );
			setSelectedKeys( [ data[0].id ] );
			onSelect( data[0] );
			return;
		}

		let response = await getCategoryTree( { type: type || 'CUSTOMER' } );
		if ( response.data && response.data.success ) {
			let dates = response.data.data.map( item => {
				let isActive = selectNode ? selectNode.id ===item.id : false;
				return {
					...item,
					title: item.name,
					key: item.id,
					children: [],
					// selectable: item.parentId === '0' ? false : true,
					selectable: true,
					// icon: <CarryOutOutlined/>
					icon: <span className={ `iconfont ${ isActive ? 'bdhwenjianjiadakai' : 'bdhwenjianjiaguanbi' }` }></span>
				};
			} );
			// console.log( dates );
			// let treeData = [];
			// dates.forEach( ( item: any ) => {
			// 	let child = buildChild( item );
			// 	treeData.push( child );
			// } );
			setTreeData( dates );
			setSelectedKeys( [ dates[0].id ] );
			onSelect( dates[0] );
		}
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [ deloitteFlag, type, menu, /*selectNode*/ ] );

	useEffect( () => {
		loadDatas();
	}, [ loadDatas ] );


	const onSelectTree = ( selectedKeys, e: { selectedNodes, node, event } ) => {
		console.log( selectedKeys, e.node );
		let node = e.node;
		setSelectNode( node );
		onSelect( node );
		setSelectedKeys( selectedKeys );
	};

	return (
		<Tree
			className={styles.analyse_tree}
			showIcon={ true }
			selectedKeys={ selectedKeys }
			treeData={ treeData }
			onSelect={ onSelectTree }
		/>
	);

};

//	映射state到当前组件
const mapStateToProps = ( state: any ) => {
	return {
		menu: state.menu,
	};
};

export default connect(
	mapStateToProps,
)( AnalyseCategorySelect );
